<template>
  <div class="login-container">

    <!-- 登录表单 -->
    <el-card>
      <div class="row login-box">
        <div class="left-img"></div>
        <div class="login-form">
          <div>
            <h2>系统登录</h2>
            <el-tag class="absolute-rt">V1.0.0</el-tag>
          </div>

          <el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <div class="flex-y-center">
                <svg-icon icon-class="user" class="mx-2" />
                <el-input ref="username" v-model="loginData.username" placeholder="请输入用户名" name="username"
                  size="large" class="w-full"/>
              </div>
            </el-form-item>

            <!-- 密码 -->
            <el-tooltip :visible="isCapslock" placement="right">
              <el-form-item prop="password">
                <div class="flex-y-center">
                  <svg-icon icon-class="lock"/>
                  <el-input v-model="loginData.password" placeholder="请输入密码" type="password" name="password"
                    @keyup="checkCapslock" @keyup.enter="handleLogin" size="large" show-password class="w-full"/>
                </div>
              </el-form-item>
            </el-tooltip>

            <!-- 登录按钮 -->
            <el-button :loading="loading" type="primary" class="w-full"
              @click="handleLogin(formRef)">登录</el-button>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script setup>
import { usePermissionStore, useUserStore } from '@/store';
// eslint-disable-next-line no-unused-vars
import router from '@/router';
import { computed, ref } from 'vue';
import { useRoute } from "vue-router";
const route = useRoute();

const loading = ref(false) // 按钮loading
const isCapslock = ref(false) // 是否大写锁定

const loginFormRef = ref(null)
const loginData = ref({
  username: "",
  password: "",
})

let { login } = useUserStore()
let { generateRoutes } = usePermissionStore()

const handleLogin = () => {

  loginFormRef.value.validate(async (valid) => {
    loading.value = false
    if (valid) {
      await login(loginData.value)
      await generateRoutes()
      const { pathname, queryParams } = parseRedirect();
      router.push({ path: pathname, query: queryParams });
    }
  })
}

function parseRedirect() {
  const query = route.query;
  console.log(route.query)
  const redirect = query.redirect ?? "/";

  const url = new URL(redirect, window.location.origin);
  const pathname = url.pathname;
  const params = {};

  url.searchParams.forEach((value, key) => {
    params[key] = value;
  });

  return { pathname, params };
}

const loginRules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: "请输入账号",
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: "请输入密码",
      },
      {
        min: 6,
        message: "密码长度不能小于6位字符",
        trigger: "blur",
      },
    ]
  }
})

</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
}

.login-box {
  overflow-y: auto;
  height: 300px;
  width: 600px;
  background: url("@/assets/images/login-bg.jpg") no-repeat center right;
}

.left-img {
  flex: 1;
  height: 100%;
  background: url("@/assets/images/login-label.png") no-repeat center right;
}

.login-form {
  margin: 0 20px;
  width: 200px;
}

.el-form-item {
  background: #f4f1f159;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
